<template>
  <div
    class="page-view"
    :class="{'show-submit': showSubmit}"
  >
    <h2 class="title van-hairline--bottom">
      {{ question.PaperName || $route.query.subj }}
    </h2>
    <TestList
      :questions="question.QuestionList"
      :show-correctness="$route.query.showAnswer"
    />
    <div
      v-if="showSubmit"
      class="footer"
      @click="onSubmit"
    >
      交卷并查看结果
    </div>
  </div>
</template>

<script lang="ts">
import mixins from 'vue-typed-mixins'
import testSubmit, { MappedState } from '@/mixins/testSubmit'
import { AppInfo } from '@/lib/appMethods'
export default mixins(testSubmit).extend({
  components: {
    TestList: () => import('components/Exam/TestList.vue'),
  },
  // data () {
  //   const { showAnswer, hideSubmit } = this.$route.query
  //   return {
  //     showAnswer,
  //     // isSubmiting: false,
  //   }
  // },
  computed: {
    showSubmit (): boolean {
      const { showAnswer, hideSubmit } = this.$route.query
      return !showAnswer && !hideSubmit
    },
  },
  // methods: {
  //   onSubmit () {
  //     if (this.isSubmiting) {
  //       return
  //     }
  //     this.isSubmiting = true
  //     const { CourseId, PaperId, Type } = this.$route.query
  //     this.submitResult(true).then(({ HistoryId }) => {
  //       this.$router.replace({ name: 'examResult',
  //         query: {
  //           ...this.$route.query,
  //           HistoryId,
  //           fromApp: AppInfo.isApp ? '1' : '',
  //         },
  //       })
  //     }).finally(() => {
  //       this.isSubmiting = false
  //     })
  //   },
  // },
})
</script>

<style lang="scss" scoped>
$footerHeight: 100px;
.page-view {
  background: #fff;
  // min-height: calc(100% + 2px);
  &.show-submit {
    padding-bottom: $footerHeight;
  }
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 98px;
  @include flex-middle();
  background: #fff;
  font-size: 30px;
  color: $primary-web;
  text-align: center;
  justify-content: center;
  @include px1border(top, #E9E9E9);
}
.title {
  line-height: 89px;
  padding: 0 30px;
  font-size: 28px;
}
</style>
